//******************************************************Toolbar样式******************************************************
/*
    头部 logo
*/
.x-container-main-toolbar-logo{
    background-color :$base-color;
    text-align:center;
    color: var(--base-foreground-color);
    font-size: 22px;
    font-weight: 400;
    line-height: 70px;
};

/*
    头部 toolbar
*/
.x-toolbar-main-toolbar-dark{
    background-color: var(--base-color) !important;
}

/*
    头部 按钮颜色
*/
@include button-ui(
    $ui:"main-toolbar-button-default",
    $color:var(--highlight-color),
    $hovered-color :var(--highlight-color),
    $pressed-color :var(--highlight-color),
    $icon-color:var(--highlight-color),
    $hovered-icon-color var(--highlight-color),
    $pressed-icon-color :var(--highlight-color),
    $background-color :transparent,
    $hovered-background-color:transparent,
    $pressed-background-color:transparent,
    $pressed-hovered-background-color :transparent,
    $focused-background-color : transparent,
    $focused-hovered-background-color:transparent
);

/*
    头部 按钮颜色
*/
@include button-ui(
    $ui:"main-toolbar-button-dark",
    $color:var(--base-foreground-color),
    $hovered-color :var(--base-foreground-color),
    $pressed-color :var(--base-foreground-color),
    $icon-color:var(--base-foreground-color),
    $hovered-icon-color var(--base-foreground-color),
    $pressed-icon-color :var(--base-foreground-color),
    $background-color :transparent,
    $hovered-background-color:transparent,
    $pressed-background-color:transparent,
    $pressed-hovered-background-color :transparent,
    $focused-background-color : transparent,
    $focused-hovered-background-color:transparent
);

//********************************************************Navigation-Menu样式*******************************************************
.x-container-main-menu {
    .x-button{
        font:400 14px/18px Roboto, sans-serif;
    }
    border-radius: 0px !important;
    border-bottom-color:var(--divider-color);
    border-bottom-width: 1px;
    border-bottom-style: solid; 
}

@include button-ui(
    $ui:"main-menu-button",
    $color:var(--color),
    $hovered-color :var(--color),
    $pressed-color :var(--color),
    $icon-color:var(--color),
    $hovered-icon-color var(--color),
    $pressed-icon-color :var(--color),
    $background-color :transparent,
    $hovered-background-color:transparent,
    $pressed-background-color:transparent,
    $pressed-hovered-background-color :transparent,
    $focused-background-color : transparent,
    $focused-hovered-background-color:transparent
);

.x-button-main-menu-button .x-icon-el{
    width: 30px !important;
}

@include menuitem-ui (
    $ui:"main-menu-menuitem",
    $color:var(--color),
    $icon-color :var(--color),
    $height :50px,
    $active-color:$base-color,
);


//******************************************************Navigation-TreeList样式******************************************************
/*
    左侧菜单
*/
@include treelist-ui(
    $ui:"navigation",
    $row-over-transition:0.3s,
    $padding:0px 0px,                                             //TreeList边距
    $item-text-font-size:14px,                                    //文本字体大小
    $item-expander-width :20px,                                   //箭头宽度
    $item-line-height:50px,                                       //行高
    $item-icon-width:20px                                         //图标宽度
);

.x-treelist-navigation{
    
    border-right-color:var(--divider-color);
    border-right-width: 1px;
    border-right-style: solid;

    //菜单选择项颜色
    .x-treelist-item-selected  > .x-treelist-row> .x-treelist-item-wrap{
        .x-treelist-item-text{
            color: $base-color;
        }
    };

    //菜单箭头图标右浮动
    .x-treelist-item-expander {
        left: auto;
        right:0 !important;
    };

    .x-treelist-root-container{
        .x-treelist-item-text{
            margin-left: 50px;
        };
    }
  
    .x-treelist-toolstrip {
        .x-treelist-item-tool{
            padding-left: 16px;
            padding-right: 44px;
        }
    };

    .x-treelist-item-floated > * > * > .x-treelist-item-text{
        margin-left:20px;
    }
};

.x-treelist-float-wrap {
    .x-treelist-item-expanded .x-treelist-item,.x-treelist-item-collapsed .x-treelist-item {
        width:220px;
        background-color: var(--background-color);
    }
};

//******************************************************TabPanel样式******************************************************
@include tabbar-ui (
    $ui:"main-tabBar",
    $background-color:transparent,
    $line-height :40px
);

@include tab-ui (
  $ui:"main-tabbar-tab",
  $padding:0px 22px,
  $border-radius:3px,
  $font-size :13px !important,
  $font-weight:400,
  $active-indicator-background-color :transparent,
  $active-indicator-height :0,
  $background-color :var(--base-color)  !important,
  $border-style:solid,
  $border-width : 1px
);

.main-tabpanel{
    .x-tool-boxscroller-tabbar{
        background-color:var(--base-highlight-color);
        .x-icon-el{
            color:var(--color);
        }
    }
    .x-tab .x-icon-el{
        width: 25px;
    }
}

.x-tab-main-tabbar-tab.x-has-text .x-inner-el {
    padding: 0px 25px 0px 12px;
}